// import { LoginInfo } from '../../api/modules/index.js';
import { userRegister, LoginInfo } from '../../api/modules/myapi.js';
import router from '../../router/router.js';
import { mix } from '../../utils/color.js';
import { ElMessage } from 'element-plus';

export default {
    namespaced: true,
    state: {
        UserInfo: {},
        token: sessionStorage.getItem('token') || '',
        isCollapse: true,
        themeConfig: {
            primary: '#4060c7',
            tabColor: '#FFFFFF',
            footColor: '#606266',
            backgroundColor: '#FFFFFF',
            textColor: '#00000099',
            istags: true
        }
    },
    mutations: {
        setToken(state, token) {
            state.token = token;
        },
        setUserInfo(state, userinfo) {
            state.UserInfo = userinfo;
        },
        SetIsCollapse(state, isCollapse) {
            state.isCollapse = isCollapse;
        },
        setThemeConfig(state, primary) {
            state.themeConfig.primary = primary;
        },
        setThemeConfigTbaColor(state, primary) {
            state.themeConfig.tabColor = primary;
            if (primary == '#FFFFFF') {
                state.themeConfig.footColor = '#606266';
            } else {
                state.themeConfig.footColor = '#ffffff';
            }
        },
        setThemeConfigMenuColor(state, primary) {
            if (primary) {
                state.themeConfig.backgroundColor = '#FFFFFF';
                state.themeConfig.textColor = '#00000099';
            } else {
                state.themeConfig.backgroundColor = '#1d2129';
                state.themeConfig.textColor = '#bdbdc0';
            }
        },
        setThemeConfigchangeTags(state, primary) {
            if (primary) {
                state.themeConfig.istags = true;
            } else {
                state.themeConfig.istags = false;
            }
        }
    },

    actions: {
        login({ commit }, userInfo) {
            return new Promise((resolve, reject) => {
                LoginInfo(userInfo)
                    .then((res) => {
                        console.log('======', res.data.token);
                        if (res.data?.data?.token) {
                            sessionStorage.setItem(
                                'token',
                                res.data.data.token
                            );
                            sessionStorage.setItem(
                                'UserInfo',
                                JSON.stringify(res.data.data)
                            );
                            commit('setToken', res.data.data.token);
                            commit('setUserInfo', res.data);
                            router.replace('/');
                            ElMessage({
                                message: '登录成功',
                                type: 'success'
                            });
                        } else {
                            ElMessage({
                                message: res.data.message,
                                type: 'warning'
                            });
                        }
                        resolve(res);
                    })
                    .catch((err) => {
                        reject(err);
                    });
            });
        },
        register({ commit }, userInfo) {
            return new Promise((resolve, reject) => {
                userRegister(userInfo)
                    .then((res) => {
                        resolve();
                    })
                    .catch((err) => {
                        reject(err);
                    });
            });
        },
        changeIsCollapse({ commit }, str) {
            console.log(str);
            commit('SetIsCollapse', str);
        },

        changeThem({ commit }, str) {
            commit('setThemeConfig', str);
            const pre = '--el-color-primary';
            // 白色混合色
            const mixWhite = '#ffffff';
            // 黑色混合色
            const mixBlack = '#000000';
            const el = document.documentElement;
            el.style.setProperty(pre, str);
            // 这里是覆盖原有颜色的核心代码
            for (let i = 1; i < 10; i += 1) {
                el.style.setProperty(
                    `${pre}-light-${i}`,
                    mix(str, mixWhite, i * 0.1)
                );
            }
            el.style.setProperty(
                '--el-color-primary-dark',
                mix(str, mixBlack, 0.1)
            );
        },
        changeTabColor({ commit }, val) {
            commit('setThemeConfigTbaColor', val);
        },
        changeMenuColor({ commit }, val) {
            commit('setThemeConfigMenuColor', val);
        },
        changeTags({ commit }, val) {
            commit('setThemeConfigchangeTags', val);
        }
    }
};
